import { Component, type ReactNode } from "react";
import type { StoryState } from "../type";
import "./StorySwitch.sass";

export default class StorySwitch extends Component {
  state: Readonly<StoryState> = {
    bookArr: [
      {
        title: "男生爱看",
        bookList: [
          {
            id: 1210499,
            bookName: "西周长歌",
            author: "湛兮若存",
          },
          {
            id: 1210491,
            bookName: "身处末世：低调不成后信手斩龙",
            author: "玄爷 ",
          },
        ],
      },
      {
        title: "女生必读",
        bookList: [
          {
            id: 12929,
            bookName: "快穿之绝美白莲在线教学",
            author: "坚果核 ",
          },
          {
            id: 12920,
            bookName: "转正难，千亿总裁面临辞退",
            author: "夏之枫林",
          },
        ],
      },
    ],
    activeIndex: 0,
    visible: true,
  };
  render(): ReactNode {
    return (
      <>
        <div className="tabs">
          {
            this.state.bookArr.map((item, index) => (
              <span
                className={ this.state.activeIndex === index ? "active" : "" }
                key={ index }
                onClick={ () => this.setState({ activeIndex: index }) }
              >{ item.title }</span>
            ))
          }
        </div>
        <ul className="con" style={{ height: this.state.visible ? "auto" : 0 }}>
          {
            this.state.bookArr[this.state.activeIndex].bookList.map(
              (item, index) => (
                <li key={ index }>
                  <span>书名：{ item.bookName }</span>
                  <span>作者：{ item.author }</span>
                </li>
              ))
          }
        </ul>
      </>
    );
  }
}
